<%inherit file="/monitor/base_new.html"/>

<%block name="content">
<link href="${STATIC_URL}alert/css/index.css" rel="stylesheet">
<style>
    .highcharts-tooltip table{
        text-align: left;
    }
    .paging-wrapper{
        padding: 10px 15px;
        border: 1px solid #e2e2e2;
        border-top: none;
        background-color: #fcfcfc;
    }
    .pagination-text {
        line-height: 34px;
        padding-top: 5px;
        color: #bbb;
        font-size: 14px;
    }
    .king-time-bar {
        background: none;
        padding-left: 5px;
    }
    .scene-section h5 span {
        display: initial;
        width: 110px;
        vertical-align: middle;
    }
    .scene-list > li:hover > a {
        width: 120px;
        color: #337ab7;
    }
    .scene-list > li.active > a {
        font-weight: bold;
        color: #337ab7;
    }
    .scene-list > li a {
        font-size: 15px;
    }
    .chart{
        height: 300px;;
    }
    button.favorite > i.fa-star{
        color: #999;
    }
    button.active > i.fa-star{
        color:#E6A20C;
    }
    button.hover > i.fa-star{
        color:#E6A20C;
    }

    .chart-add { font-size: 60px;margin: auto;display: table;height: 100%;}
    .chart-add > div {display:table-cell;vertical-align: middle;}
    .chart-add  a {color: #000000; cursor: pointer; border: 1px dashed #ddd;}
    .king-block-content-chart {
        border: 1px solid #e9e9e9;
        border-top: none;
    }
    .daterangepicker td.disabled, .daterangepicker option.disabled {
        color: #999;
        cursor: not-allowed;
        text-decoration: line-through;
    }
    .highcharts-tooltip span {
        height:auto;
        min-width:180px;
        max-width:250px;
        overflow:auto;
        white-space:normal !important; // add this line...
    }
    .loading-detail {
        z-index: 300;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        text-align: center;
    }
    .loading-content{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
    }
</style>
<input type="hidden" id="s_id">
<section class="monitor-popup hidden">
</section>
<article class="content" style="min-height: 0; padding-top: 0">
<section class="side-content-wrapper hidden" id="strategy_detail_side" data-type="close">
    <div class="side-content open strategy-detail">
        <div class="side-detail" id="strategy_detail_div">
            <div class="strategy-detail info-item">
                <div class="clearfix">
                    <div class="title pull-left">
                        <i class="iconfont icon-zhujixinxi"></i>
                        策略详情信息
                    </div>
                    <div class="pull-right">
                        <button class="king-btn king-success" title="修改策略" id="modify" @click="modify_self()">修改策略</button>
                    </div>
                </div>
                <div class="detail">
                    <div class="detail-row">
                        <div class="detail-left">
                            <div class="subtitle">所属监控项：</div>
                            <div class="subcontent">{{strategy_obj.monitor_name}}</div>
                        </div>
                        <div class="detail-left">
                            <div class="subtitle">无数据警告：</div>
                            <div class="subcontent">{{nodata_alarm_display}}</div>
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-left">
                            <div class="subtitle">告警标题：</div>
                            <div class="subcontent">{{strategy_obj.display_name}}</div>
                        </div>
                        <div class="detail-left">
                            <div class="subtitle">自动处理：</div>
                            <div class="subcontent">{{strategy_obj.solution_display}}</div>
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-left">
                            <div class="subtitle lh-30">告警范围：</div>
                            <div class="subcontent lh-30">{{strategy_obj.condition_str}}</div>
                        </div>
                        <div class="detail-left">
                            <div class="subtitle lh-30">告警级别：</div>
                            <div class="subcontent {{monitor_level_class(strategy_obj.monitor_level)}} lh-30">{{monitor_level_display(strategy_obj.monitor_level)}}</div>
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-left">
                            <div class="subtitle lh-30">检测算法：</div>
                            <div class="subcontent lh-30">{{strategy_obj.strategy_name}}</div>
                        </div>
                        <div class="detail-left">
                            <div class="subtitle lh-30">通知方式：</div>
                            <div class="subcontent">
                                {{{strategy_obj.notify_way_str}}}
                            </div>
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-left">
                            <div class="subtitle">触发条件：</div>
                            <div class="subcontent">{{{strategy_obj.strategy_desc}}}</div>
                        </div>
                        <div class="detail-left">
                            <div class="subtitle lh-30">通知角色：</div>
                            <div class="subcontent lh-30">
                                {{{strategy_obj.notify_man_html}}}
##                                <div class="sideContent-role">运维</div>
##                                <div class="sideContent-role">开发</div>
                            </div>
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-left">
                            <div class="subtitle">收敛规则：</div>
                            <div class="subcontent">{{strategy_obj.converge_str}}</div>
                        </div>
                        <div class="detail-left">
                            <div class="subtitle">通知时间段：</div>
                            <div class="subcontent">{{strategy_obj.notice_start_hh}} : {{strategy_obj.notice_start_mm}} ~ {{strategy_obj.notice_end_hh}} : {{strategy_obj.notice_end_mm}}</div>
                        </div>
                    </div>
                    <div class="loading-detail hidden" id="strategyLoading">
                        <div class="loading-content">
                            <img alt="loadding" src="${STATIC_URL}img/hourglass_36.gif">
                        </div>
                    </div>
                </div>
            </div>

            <div class="alert-event info-item">
                <div class="clearfix">
                    <div class="title pull-left mr5">
                        <i class="iconfont icon-gaojingshijian"></i>
                        关联告警事件
                    </div>
                    <div class="date-select pull-right">
                        查看日期：
                        <input type="text" class="form-control time-picker" id="alarm_date" placeholder="选择日期...">
                    </div>
                </div>

                <div class="detail" style="position: relative;">
                    <table class="table table-header-bg table-bordered mb0">
                        <thead>
                            <tr>
                                <td>告警时间</td>
                                <td>级别</td>
                                <td class="alert-condition">告警内容</td>
                                <td>状态</td>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-if="strategy_alarms_table.length>0">
                                <template v-for="alarm in strategy_alarms_table">
                                    <tr>
                                        <td>{{alarm.source_time.split(" ")[1]}}</td>
                                        <td class="{{alarm.level_class}}">{{alarm.level_display}}</td>
                                        <td class="alert-condition">
                                            <p>维度信息：{{alarm.dimensions_display}}</p>
                                            <p>{{alarm.raw}}</p>
                                        </td>
                                        <td>
                                            {{{alarm.status_html}}}
                                        </td>
                                    </tr>
                                </template>
                            </template>
                            <template v-if="strategy_alarms_table.length==0">
                                <tr>
                                    <td colspan="9" class="no-data">
                                        无查询数据
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                        </table>
                    <div class="loading-detail hidden" id="relevantAlertLoading">
                        <div class="loading-content">
                            <img alt="loadding" src="${STATIC_URL}img/hourglass_36.gif">
                        </div>
                    </div>
                    <div class="paging-wrapper clearfix" id="alarms-paging-footer">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="close-btn open" id="strategy_detail_close" data-type="close">关闭</div>
</section>
</article>
<article class="content modify" style="min-height: 0; padding-top: 0">
<section class="side-content-wrapper hidden" id="strategy_edit_side" data-type="close">
				<div class="side-content open strategy-edit">
					<div class="side-detail" id="strategy_edit_div">
						<!-- 告警标题 -->
						<section class="config__panel alert-title">
							<div class="config__panelHead">
								<div class="config__panelTitle pull-left">
									<span class="config__icon config__panelIcon">
										<i class="iconfont icon-tiaojianguolv"></i>
									</span>
									<span class="config__panelTitle-text required">告警标题</span>
								</div>
								<div class="config__panelTool pull-left">
									<input type="text" name="" placeholder="请输入此条告警策略的标题" id="strategyTitle" v-model="display_name">
								</div>
							</div>
						</section>
						<!-- 触发条件 -->
						<section class="config__panel" id="trigger_condition">
							<div class="config__panelHead">
								<div class="config__panelTitle pull-left">
									<span class="config__icon config__panelIcon">
										<i class="iconfont icon-tiaojianguolv"></i>
									</span>
									<span class="config__panelTitle-text">触发条件</span>
								</div>
								<div class="config__panelTool pull-right" data-type="slideItem">
									<span class="config__icon config__panelIcon">
										<i class="iconfont icon-jiantou1"></i>
									</span>
								</div>
							</div>
							<div class="config__panelContent">
								<div class="detail-row">
									<div class="subtitle lh-30">
                                        <span class="data-tip" data-html="true" data-trigger="hover" data-placement="right" data-content="<span class='word-break'>多条过滤条件的and/or关系：以or为分隔，or的前后都是一组（）的关系。</span>">告警范围 <i class="fa fa-question-circle"></i></span>
                                    </div>
									<div class="subcontent form-group">
##                                        <span class="pre-span">where</span>
                                        <input type="hidden" id="condition_num_id" value="0"/>
                                        <div id="condition-config-0" style="display:none">
                                            <input class="dimension_condition_select2" style="width:100px;" id="condition_field"/>
                                            <select class="condition_select2" style="width:80px;" id="condition_method">
                                                <option value="eq" selected>等于</option>
                                                <option value="gte">大于</option>
                                                <option value="lte">小于</option>
                                                <option value="reg">正则</option>
                                                <option value="include">包含</option>
                                                <option value="exclude">不包含</option>
                                            </select>
                                            <input type="text" class="form-control" id="condition_value" placeholder="多个值以逗号分隔" style="width:180px;"/>
                                            <a  title="添加告警范围" class="ml10 add_condition_a" href="###" onclick="add_condition(this)"><i class="fa fa-plus"></i></a>
                                            <a  title="删除告警范围" class="ml10 del_condition_a" ><i class="fa fa-times"></i></a>
                                        </div>
									</div>
								</div>

								<div class="detail-row">
									<div class="subtitle lh-30"><span class="required">检测算法</span></div>
                                        <div class="subcontent">
                                            <label class="config__inputItem">
                                                <input type="radio" name="strategy_id" checked data-type="icheck" data-target="static_threshold" value="1000"><span class="iCheck-text">静态阈值</span>
                                            </label>
                                            <label class="config__inputItem">
                                                <input type="radio" name="strategy_id" data-type="icheck" data-target="strategy" value="1001"><span class="iCheck-text">同比策略（简易）</span>
                                            </label>
                                            <label class="config__inputItem">
                                                <input type="radio" name="strategy_id" data-type="icheck" data-target="strategy" value="1002"><span class="iCheck-text">环比策略（简易）</span>
                                            </label>
                                            <label class="config__inputItem">
                                                <input type="radio" name="strategy_id" data-type="icheck" data-target="strategy-high" value="1003"><span class="iCheck-text">同比策略（高级）</span>
                                            </label>
                                            <label class="config__inputItem">
                                                <input type="radio" name="strategy_id" data-type="icheck" data-target="strategy-high" value="1004"><span class="iCheck-text">环比策略（高级）</span>
                                            </label>
                                        </div>
                                        <div class="subcontent config__subRowContent">
                                    <div class="config__subRowContent-item config__preLabel trigger-setting pull-left">
                                        <div class="static-threshold" data-id="static_threshold">
                                            性能指标当前值
                                            <select class="inner-select" data-type="vue-select2" id="tAlgorithmSelect" name="method">
                                                <option value="eq">=</option>
                                                <option value="gte">≥</option>
                                                <option value="gt">＞</option>
                                                <option value="lte">≤</option>
                                                <option value="lt">＜</option>
                                            </select>
                                            <input onkeypress='return event.charCode >= 48 && event.charCode <= 57' min="1" type="number" id="tAlgorithmInput" id="tAlgorithmInput" placeholder="请填写阈值..." class="inner-input" v-model="threshold">
                                            时，触发告警
                                        </div>
                                        <div class="strategy hidden" data-id="strategy">
                                            <p class="strategy-row">
                                                指标当前值{{strategy_display}}
                                                <span class="strategy-up strategy-input">
                                                    <input min="1" type="number" id="strategy_up" class="inner-input" v-model="ceil" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
                                                </span>
                                                ${"%"}时，触发告警
                                            </p>
                                            <p class="strategy-row">
                                                指标当前值{{strategy_display}}
                                                <span class="strategy-down strategy-input">
                                                    <input min="1" type="number" id="strategy_down" class="inner-input strategy-down" v-model="floor" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
                                                </span>
                                                ${"%"}时，触发告警
                                            </p>
                                        </div>
                                        <div class="strategy hidden" data-id="strategy-high">
                                            <p class="strategy-row">
                                                较前<input min="1" type="number" id="strategy_up_interval" class="inner-input-sm" v-model="ceil_interval" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>{{strategy_display}}
                                                <span class="strategy-up strategy-input">
                                                    <input min="1" type="number" id="strategy_up" class="inner-input" v-model="ceil" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
                                                </span>
                                                ${"%"}时，触发告警
                                            </p>
                                            <p class="strategy-row">
                                                较前<input min="1" type="number" id="strategy_down_interval" class="inner-input-sm" v-model="floor_interval" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>{{strategy_display}}
                                                <span class="strategy-down strategy-input">
                                                    <input min="1" type="number" id="strategy_down" class="inner-input strategy-down" v-model="floor" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
                                                </span>
                                                ${"%"}时，触发告警
                                            </p>
                                        </div>
                                    </div>
                                    <span class="config__errorMsg" id="strategy_option_error"></span>
									</div>
								</div>

								<div class="detail-row">
									<div class="subtitle lh-30"><span class="required">收敛规则</span></div>
									<div class="subcontent">
                                        <label class="config__inputItem">
                                            <input type="radio" name="converge_id" checked data-type="icheck" data-target="ruleA" value="1"><span class="iCheck-text">收敛方式一</span>
                                        </label>
                                        <label class="config__inputItem">
                                            <input type="radio" name="converge_id" data-type="icheck" data-target="ruleB" value="2"><span class="iCheck-text">收敛方式二</span>
                                        </label>
                                        <label class="config__inputItem">
                                            <input type="radio" name="converge_id" data-type="icheck" data-target="ruleNone" value="0">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="right" data-content="<span class='word-break'>监控系统默认设定了内置的收敛规则，如果你有个性化的特殊收敛需求，请选择其它2种收敛规则。</span>"><span class="iCheck-text">系统默认<i class="fa fa-question-circle"></i></span></span>
                                        </label>
                                        <span class="config__errorMsg"></span>
									</div>
							        <div class="subcontent  config__subRowContent clearfix" data-type="rule-wrapper">
                                <div class="config__subRowContent-item config__preLabel convergence-rule pull-left hidden" data-id="ruleA">
                                    <div class="convergence-ruleA">
										<select class="inner-select" data-type="vue-select2" id="ruleBSelect" name="converge_continuous">
											<option value="5">5分钟</option>
											<option value="10">10分钟</option>
                                            <option value="15">15分钟</option>
                                            <option value="30">30分钟</option>
                                            <option value="60">1小时</option>
										</select>
										内，满足
										<input min="1" type="number" id="ruleBInput" class="inner-input" v-model="converge_count" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
										次告警条件时，才触发告警
									</div>
                                </div>
								<div class="config__subRowContent-item config__preLabel convergence-rule pull-left" data-id="ruleB">
									<div class="convergence-ruleB">
										自第
										<input min="1" type="number" id="ruleAInput" class="inner-input" v-model="converge_count" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
										次告警后
										<select class="inner-select" data-type="vue-select2" id="ruleASelect" name="converge_continuous">
											<option value="5">5分钟</option>
											<option value="10">10分钟</option>
                                            <option value="15">15分钟</option>
                                            <option value="30">30分钟</option>
                                            <option value="60">1小时</option>
										</select>
										内不再发出告警
									</div>
								</div>
                                <div class="pull-left hidden" data-id="ruleNone"></div>
                                <span class="config__errorMsg" id="converge_err"></span>
							</div>
								</div>

								<div class="detail-row">
									<div class="subtitle lh-30"><span class="required">无数据告警</span></div>
									<div class="subcontent">
										<label class="config__inputItem">
											<input type="radio" name="show_nodata_alarm" data-type="icheck" value="1" data-target="nodata_alarm"><span class="iCheck-text">是</span>
										</label>
										<label class="config__inputItem">
											<input type="radio" name="show_nodata_alarm" data-type="icheck" checked value="0"><span class="iCheck-text">否</span>
										</label>
                                        <label data-id="nodata_alarm" class="hidden">
                                        当数据连续丢失<input min="0" type="number" name="nodata_alarm" class="config__input va-middle" v-model="nodata_alarm"
                                            style="width: 50px;min-width: 50px;" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
									    个周期时，触发告警</label>
                                        <label class="config__inputItem">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="right" data-content="<span class='word-break'>当监控维度的值出现断层时，是否发出告警？ 对于相对离散的数据源，建议不打开无数据告警。</span>"><i class="fa fa-question-circle"></i>说明</span>
                                        </label>
                                        <span class="config__errorMsg" id="nodata_alarm_error"></span>
                                    </div>

								</div>
							</div>
						</section>
						<!-- 自动处理 -->
                        <section class="config__panel" id="auto_process">
                            <div class="config__panelHead">
                                <div class="config__panelTitle pull-left clearfix">
                                    <span class="config__icon config__panelIcon">
                                        <i class="iconfont icon-tiaojianguolv"></i>
                                    </span>
                                    <span class="config__panelTitle-text">自动处理（状态：{{solution_is_enable?"开":"关"}}）</span>
                                </div>
                                <div class="config__panelTool pull-right" data-type="slideItem">
                                    <span class="config__icon config__panelIcon">
                                        <i class="iconfont icon-jiantou1 expanded"></i>
                                    </span>
                                </div>
                                <div class="switchery_box pull-right mr10" id="auto_process_btn">
                                    <input type="checkbox" class="js-switch-small" v-model="solution_is_enable" data-type="switch">
                                </div>
                            </div>
                            <div class="config__panelContent" style="display: none">
                                <!-- 处理方式 -->
                                <div class="config__row">
                                    <span class="config__panelLabel lh-30">处理方式</span>
                                    <div class="config__rowContent">
                                        <label class="config__inputBtn text-info">
                                            <input type="radio" name="auto_process_method" v-model="solution_type" value="job">
                                            <a class="king-btn-demo king-btn" title="作业平台">作业平台</a>
                                        </label>
                                    </div>
                                </div>
                                <!-- 流程列表 -->
                                <div class="config__row">
                                    <span class="config__panelLabel lh-30">作业列表</span>
                                    <div class="config__rowContent">
                                        <input class="config__select" data-type="vue-select2" id="autoProcessFlowList" name="solution_task_id">
                                        <a class="king-btn-demo king-btn update-btn" title="" id="updateTaskList">
                                            <i class="iconfont icon-weibiaoti2"></i>
                                        </a>
                                        <a class="king-btn-demo king-btn king-success" title="新建流程" id="addFlow" href="${JOB_URL}" target="_blank">
                                            <i class="fa fa-plus btn-icon"></i>新建作业
                                        </a>
                                    </div>
                                </div>
                                <!-- 结果通知 -->
                                <div class="config__row">
                                    <span class="config__panelLabel lh-30">结果通知</span>
                                    <div class="config__rowContent">
                                        <label class="config__inputItem">
                                            <input type="checkbox" name="solution_notice" data-type="icheck" value="begin"><span class="iCheck-text">开始执行前通知</span>
                                        </label>
                                        <label class="config__inputItem">
                                            <input type="checkbox" name="solution_notice" data-type="icheck" value="end"><span class="iCheck-text">执行完成后通知</span>
                                        </label>
            ##							<label class="config__inputItem">
            ##								<input type="checkbox" name="result_msg" data-type="icheck" value="all"><span class="iCheck-text">执行前后都通知</span>
            ##                            </label>
                                    </div>
                                </div>
                            </div>
                        </section>
						<!-- 通知方式 -->
						<section class="config__panel" id="alert_method">
							<div class="config__panelHead">
								<div class="config__panelTitle pull-left">
									<span class="config__icon config__panelIcon">
										<i class="iconfont icon-tiaojianguolv"></i>
									</span>
									<span class="config__panelTitle-text">通知方式</span>
								</div>
								<div class="config__panelTool pull-right" data-type="slideItem">
									<span class="config__icon config__panelIcon">
										<i class="iconfont icon-jiantou1"></i>
									</span>
								</div>
							</div>
                            <div class="config__panelContent">
                                <!-- 告警级别 -->
                                <div class="config__row">
                                    <span class="config__panelLabel lh-30 required">告警级别</span>
                                    <div class="config__rowContent">
                                        <label class="config__inputBtn text-muted">
                                            <input type="radio" name="alert_level" value="3" v-model="monitor_level">
                                            <a class="king-btn-demo king-btn" title="轻微警告">轻微警告</a>
                                        </label>
                                        <label class="config__inputBtn text-info">
                                            <input type="radio" name="alert_level" value="2" v-model="monitor_level">
                                            <a class="king-btn-demo king-btn" title="普通警告">普通警告</a>
                                        </label>
                                        <label class="config__inputBtn text-danger">
                                            <input type="radio" name="alert_level" value="1" v-model="monitor_level">
                                            <a class="king-btn-demo king-btn" title="严重警告">严重警告</a>
                                        </label>
                                    </div>
                                </div>
                                <!-- 通知方式 -->
                                <div class="config__row">
                                    <span class="config__panelLabel lh-30 required">通知方式</span>
                                    <div class="config__rowContent clearfix">
                                        <label class="config__inputItem">
                                            <input type="checkbox" name="notice" data-type="icheck" value="mail" v-model="notice_list">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="top" data-content="<span class='word-break'>邮件</span>">
                                                <img src="${STATIC_URL}alert/img/mail.png" class="icheck-img">
                                            </span>
                                        </label>
                                        <label class="config__inputItem">
                                            <input type="checkbox" name="notice" data-type="icheck" value="sms" v-model="notice_list">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="top" data-content="<span class='word-break'>短信</span>">
                                                <img src="${STATIC_URL}alert/img/message.png" class="icheck-img">
                                            </span>
                                        </label>
                                        <label class="config__inputItem">
                                            <input type="checkbox" name="notice" data-type="icheck" value="wechat" v-model="notice_list">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="top" data-content="<span class='word-break'>微信</span>">
                                                <img src="${STATIC_URL}alert/img/wechat.png" class="icheck-img">
                                            </span>
                                        </label>
                                        <label class="config__inputItem hidden">
                                            <input type="checkbox" name="notice" data-type="icheck" value="im" v-model="notice_list">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="top" data-content="<span class='word-break'>RTX</span>">
                                                <img src="${STATIC_URL}alert/img/rtx.png" class="icheck-img">
                                            </span>
                                        </label>
                                        <label class="config__inputItem hidden">
                                            <input type="checkbox" name="notice" data-type="icheck" data-id="phone_receiver" value="phone" v-model="notice_list">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="top" data-content="<span class='word-break'>电话</span>">
                                                <img src="${STATIC_URL}alert/img/phone.png" class="icheck-img">
                                            </span>
                                        </label>
                                        <select name="phone_receiver" data-type="vue-select2" class="config__select hidden" multiple="multiple">
                                            %for uin, nick in other_users.items():
                                                <option value="${uin}">${nick}(${uin})</option>
                                            %endfor
                                        </select>
                                        &nbsp;&nbsp;&nbsp;
                                        <span class="data-tip hidden" data-html="true" data-trigger="hover" data-placement="top" data-content="<span class='word-break'>只有在当前接听者选择转移下一位处理人的情况下，才会往后进行呼叫知会；如果当前接听人选择不转移，就不会给后排人员呼叫。</span>"><i class="fa fa-question-circle"></i>说明</span>
                                        <span class="config__errorMsg" id="notice_list_error" style="float:right;"></span>
                                    </div>
                                </div>
                                <!-- 通知角色 -->
                                <div class="config__row">
                                    <span class="config__panelLabel lh-30"><span class="required">通知角色</span></span>
                                    <div class="config__rowContent clearfix">
                                        <label class="config__inputItem">
                                            <input type="checkbox" name="notice_role_list" data-type="icheck" value="Maintainers">
                                            <span class="iCheck-text">运维</span>
                                        </label>
##            							<label class="config__inputItem">
##            								<input type="checkbox" name="notice_role_list" data-type="icheck" value="OperationPlanning">
##            								<span class="iCheck-text">运营</span>
##            							</label>
##            							<label class="config__inputItem">
##            								<input type="checkbox" name="notice_role_list" data-type="icheck" value="PmpProductMan">
##            								<span class="iCheck-text">产品</span>
##            							</label>
##            							<label class="config__inputItem">
##            								<input type="checkbox" name="notice_role_list" data-type="icheck" value="PmpDBAMajor">
##            								<span class="iCheck-text">DBA</span>
##            							</label>
##            							<label class="config__inputItem">
##            								<input type="checkbox" name="notice_role_list" data-type="icheck" value="AppDevMan">
##            								<span class="iCheck-text">开发</span>
##            							</label>
                                        <label class="config__inputItem">
                                            <input type="checkbox" name="notice_role_list" data-type="icheck" data-id="responsible" value="other">
                                            <span class="iCheck-text">其他人员</span>
                                        </label>
                                        <select name="responsible" data-type="vue-select2" class="config__select hidden" multiple="multiple">
                                            %for uin, nick in other_users.items():
                                                <option value="${uin}">${nick}(${uin})</option>
                                            %endfor
                                        </select>
                                        <span class="config__errorMsg" id="notice_role_list_error" style="float:right;"></span>
                                    </div>
                                </div>
                                <!-- 通知时间段 -->
                                <div class="config__row">
                                    <span class="config__panelLabel lh-30">通知时间段</span>
                                    <div class="config__rowContent">
                                        <select class="config__select alert-duration" data-type="vue-select2" id="startHour" name="notice_start_hh">
                                            %for i in xrange(24):
                                                <option>${("0%s" if i<10 else "%s") % i}</option>
                                            %endfor
                                        </select>
                                        :
                                        <select class="config__select alert-duration" data-type="vue-select2" id="startMinute" name="notice_start_mm">
                                            %for i in xrange(60):
                                                <option>${("0%s" if i<10 else "%s") % i}</option>
                                            %endfor
                                        </select>
                                        &nbsp;~&nbsp;
                                        <select class="config__select alert-duration" data-type="vue-select2" id="endHour" name="notice_end_hh">
                                            %for i in xrange(24):
                                                <option ${"selected" if i==23 else ""}>${("0%s" if i<10 else "%s") % i}</option>
                                            %endfor
                                        </select>
                                        :
                                        <select class="config__select alert-duration" data-type="vue-select2" id="endMinute" name="notice_end_mm">
                                            %for i in xrange(60):
                                                <option ${"selected" if i==59 else ""}>${("0%s" if i<10 else "%s") % i}</option>
                                            %endfor
                                        </select>
                                        <label class="config__inputItem">
                                            <span class="data-tip" data-html="true" data-trigger="hover" data-placement="right" data-content="<span class='word-break'>设置告警发出的时间段后，该监控项所产生的异常信息将只会在你所配置的时间段内才发出告警。</span>"><i class="fa fa-question-circle"></i>说明</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
						</section>

						<section class="config__btnRow custom_strategy_edit">
							<button class="king-btn-demo king-btn king-radius king-success king-btn-large" title="保存" id="save">保存</button>
							<button class="king-btn-demo king-btn king-radius king-default king-btn-large" title="取消" id="cancel">取消</button>
						</section>
                        <div class="loading-detail hidden" id="strategyeditLoading">
                            <div class="loading-content">
                                <img alt="loadding" src="${STATIC_URL}img/hourglass_36.gif">
                            </div>
                        </div>
					</div>


				</div>
				<div class="close-btn open" id="strategy_edit_close" data-type="close">关闭</div>
			</section>
</article>
<section class="operation-content">
    <!-- 左侧菜单栏 -->
    <!-- layout-left start -->
    <div class="layout-left" id="layoutLeft">
        <div class="scene-section-box">
            <section id='left_menu' class="scene-section pt0 pl0 pr0">
            </section>
        </div>
    </div>
    <!-- layout-left end -->

    <!-- 右侧面板 -->
    <!-- layout-right start -->
    <div class="layout-right">
        <div class="king-monitor-box relative">
            <h5 class="king-monitor-head">
            <span class="icon mr5"><i class="fa fa-line-chart"></i></span>
            <strong>监控分组视图</strong>
            <div class="king-btn king-success re-make-chart pull-right mt5 mr15" id="add_custom">添加自定义监控</div>
            <!-- <div class="king-btn king-success re-make-chart pull-right mt5 mr15" id="add_keyword">添加日志关键字监控</div> -->
            </h5>
            <!-- king-time-bar start -->
            <!-- 时间选择栏 -->
            <div class="king-time-bar">
                <div class="time_selector ml15 mr0" style="width:150px;">

                    <div class="input-group">
                      <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                      <input type="text" class="form-control daterangepicker_demo" id="daterangepicker" placeholder="选择日期...">
                    </div>
                </div>
                <div class="king-num-bar timeline ui-selectable ml15 mr0" id="selectable">
                    <div class="icon-time ui-selected">整天</div>
                    <div class="timeblock  ui-selectee ui-selected" value="0">0</div>
                    <div class="timeblock  ui-selectee ui-selected" value="1"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="2">2</div>
                    <div class="timeblock  ui-selectee ui-selected" value="3"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="4">4</div>
                    <div class="timeblock  ui-selectee ui-selected" value="5"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="6">6</div>
                    <div class="timeblock  ui-selectee ui-selected" value="7"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="8">8</div>
                    <div class="timeblock  ui-selectee ui-selected" value="9"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="10">10</div>
                    <div class="timeblock  ui-selectee ui-selected" value="11"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="12">12</div>
                    <div class="timeblock  ui-selectee ui-selected" value="13"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="14">14</div>
                    <div class="timeblock  ui-selectee ui-selected" value="15"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="16">16</div>
                    <div class="timeblock  ui-selectee ui-selected" value="17"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="18">18</div>
                    <div class="timeblock  ui-selectee ui-selected" value="19"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="20">20</div>
                    <div class="timeblock  ui-selectee ui-selected" value="21"></div>
                    <div class="timeblock  ui-selectee ui-selected" value="22">22</div>
                    <div class="timeblock  ui-selectee ui-selected" value="23"></div>
                </div>
                <div class="king-btn king-primary re-make-chart ml15" id="refresh_all">刷新全部</div>
            </div>

            <div class="clearfix"></div>
            <div class="loading-box ml15 absolute text-center">
                <img alt="loadding" src="${STATIC_URL}img/hourglass_36.gif"> 页面初始化中，请稍后...
            </div>
            <!-- king-time-bar end -->
            <!-- 图表展示栏 -->
            <div class="charts-container clearfix">
                <div class="charts-box" id="right_panel">

                </div>
            </div>
            ## end mark-info chart-container
        </div>
    </div>
    <!-- layout-right end -->
</section>
<div class="modal fade" id="modal" role="dialog"> </div>
</%block>
<%block name="script">


<link rel="stylesheet" href="${STATIC_URL}assets/mCustomScrollbar-3.0.9/jquery.mCustomScrollbar.css">
<script src="${STATIC_URL}assets/mCustomScrollbar-3.0.9/jquery.mCustomScrollbar.concat.min.js"></script>

<script src="${STATIC_URL}assets/highcharts-4.1.7/js/highcharts.js"></script>
<script src="${STATIC_URL}assets/highcharts-4.1.7/js/highcharts-more.js"></script>
<!--时间选择器-->
<link href="${STATIC_URL}assets/daterangepicker-2.0/css/daterangepicker.css" rel="stylesheet">
<script src="${STATIC_URL}assets/daterangepicker-2.0/js/moment.js"></script>
<script src="${STATIC_URL}assets/daterangepicker-2.0/js/daterangepicker.js"></script>
<script type="text/javascript" src="${STATIC_URL}js/jquery-ui.min.js"></script>

<link rel="stylesheet" href="${STATIC_URL}alert/css/patch.css">
<link rel="stylesheet" href="${STATIC_URL}alert/css/configV2/configure.css">
<link rel="stylesheet" href="${STATIC_URL}alert/css/performanceV2/style.css">
<link rel="stylesheet" href="${STATIC_URL}alert/css/dataview/monitor.css">

<script src="${STATIC_URL}alert/js/dataview/graph-highcharts.js"></script>
<script src="${STATIC_URL}alert/js/dataview/dataview.js"></script>
<script src="${STATIC_URL}alert/js/dataview/operation.js"></script>
<script src="${STATIC_URL}alert/js/dataview/operation_monitor.js"></script>
<link href="${STATIC_URL}assets/datatables-1.10.7/dataTables.bootstrap.css" rel="stylesheet"/>
<script src="${STATIC_URL}assets/datatables-1.10.7/jquery.dataTables.js"></script>
<script src="${STATIC_URL}assets/datatables-1.10.7/dataTables.bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="${STATIC_URL}alert/css/performanceV2/icheck/minimal/blue.css">
<script src="${STATIC_URL}assets/icheck-1.x/icheck.min.js"></script>
<link href="${STATIC_URL}assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
<link href="${STATIC_URL}assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
<script src="${STATIC_URL}assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
<script src="${STATIC_URL}alert/js/dataview/config.js"></script>
<link href="${STATIC_URL}assets/switchery-master/dist/switchery.css" rel="stylesheet">
<script src="${STATIC_URL}assets/switchery-master/dist/switchery.js"></script>

<script>
    var from_overview = ${"true" if from_overview else "false"};
    var alarm_strategy_id = ${alarm_strategy_id};
    var default_menu_id = "${request.session.get("default_menu_id", "")}";
    var monitor_id = ${monitor_id};
    render_left_menu();
    init_top_time_bar();
    init_strategy_vue_for_read();
    init_strategy_vue_for_edit();
</script>
<script>
$(function (){
    $('.notic-people .label').popover();
})
</script>
</%block>
